<template>
  <div>
    <div  class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="4" :sm="24">
            <a-form-item  label="标题">
              <a-input v-model="queryParam.id" placeholder=""/>
            </a-form-item>
          </a-col>

<!--          <a-col :md="4" :sm="24">-->
<!--            <a-form-item label="状态">-->
<!--              <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">-->
<!--                <a-select-option value="1">已发布</a-select-option>-->
<!--                <a-select-option value="0">未发布</a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--          </a-col>-->

            <a-form-item label="时间段">
              <a-range-picker>
                <template slot="dateRender" slot-scope="current">
                  <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                    {{ current.date() }}
                  </div>
                </template>
              </a-range-picker>
              <a-button style="margin-left: 8px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>

              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </a-form-item>
          <a-col>
            <a-form-item>

            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table :pagination="false"  :columns="columns" :data-source="data">

        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> 标题</span>

        <span slot="tags" slot-scope="tags">
      <a-tag
        v-for="tag in tags"
        :key="tag"
        :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
      >
        {{ tag.toUpperCase() }}
      </a-tag>
    </span>
          <span slot="action" slot-scope="data">
            <router-link  :to="{ path: `/blog/edit/${data.id}` }">
              <a>edit</a>
            </router-link>
            <a style="padding-left: 40px;" @click="del(data.id)">del</a>
          </span>



      </a-table>

    </div>
    <div style="padding-top: 15px; float: right">
      <a-pagination
        show-size-changer
        show-quick-jumper
        :pageSizeOptions="pages.pageSizeOptions"
        :default-current="pages.defaultCurrent"
        :total="pages.total"
        :pageSize="pages.pageSize"
        @change="getBlogsByPage"
        @showSizeChange="onSizeChange"
      />

    </div>

</div>
</template>
<script>
import {getServiceList} from "@/api/manage";

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
  },
  {
    dataIndex: 'title',
    key: 'title',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'title' },
  },
  {
    title: '分类',
    dataIndex: 'category.name',
    key: 'category',
  },
  // {
  //   title: '标签',
  //   key: 'tags',
  //   dataIndex: 'tagVo.name',
  //   scopedSlots: { customRender: 'tags' },
  // },

  {
    title: '发布日期',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
]

const data = [
  {
    key: '1',
    id: 1,
    name: 'mother fucker',
    category: 'front',
    tags: ['hello', 'developer','qwe','qweee','qweeeee'],
    status: '未发布',
    date: '2020-10-1 22:30',
  },
  {
    key: '2',
    id: 2,
    name: 'fucker',
    category: '后端',
    tags: ['loser'],
    status: '已发布',
    date: '2020-10-1 22:30',
  },
  {
    key: '3',
    id: 3,
    name: 'teddy',
    category: '大后端',
    tags: ['cool', 'teacher'],
    status: '已发布',
    date: '2020-10-1 22:30',
  },
]
import blog from "@/api/blog";
export default {
  data() {
    return {
      pages: {
        defaultCurrent: 1, // 默认当前页数
        total: 0, // 总数，必须先有
        pageSize: 5,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["5", "10", "15", "20"],
        defaultPageSize: 5,
      },
      data,
      id: null,
      columns,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        console.log('loadData.parameter', parameter)
        return getServiceList(Object.assign(parameter, this.queryParam))
          .then(res => {
            return res.result
          })
      },
      selectedRowKeys: [],
      selectedRows: [],

      // custom table alert & rowSelection
      options: {
        alert: {
          show: true, clear: () => {
            this.selectedRowKeys = []
          }
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      }
    }
  },
  created() {
    this.getBlogsByPage();


  },
  methods: {

    del(blogId) {
      blog.deleteBlogById(blogId).then(response => {
        this.$message.success(`deleted article number ${blogId}.`, 3);
        this.getBlogsByPage();
      })
    },
    onSizeChange(current, pageSize) {
      this.pages.defaultCurrent = 1
      this.pages.pageSize = pageSize
      this.getBlogsByPage()
    },
    change(current, size) {
      this.pages.defaultCurrent = current;
      this.pages.pageSize = size;
      this.getBlogsByPage();
    },
    getBlogsByPage(currentPage = 1) {
      this.pages.defaultCurrent = currentPage;
      blog.getBlogByPage(this.pages.defaultCurrent, this.pages.pageSize, this.queryParam).then(response => {
       let {blogData} = this.data = response.data.content;
        this.pages.total = response.data.total;
        console.log('content: ', response.data.content)
        console.log(`blog details: ${JSON.stringify(this.data)}`)
      })

    },

    getCurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = '1px solid #1890ff';
        style.borderRadius = '50%';
      }
      return style;
    },
  },
}
</script>
<style scoped>

#components-pagination-demo-mini .ant-pagination:not(:last-child) {
  margin-bottom: 24px;
}
</style>